<template>
    <div class="hello">
        <!-- 父传子 -->
        <Child :info="parentMsg" @clickChild="clickEven" ref="testcomRef"></Child>

        <!-- 子传父（点击事件） -->
        <h1 class="marginTop">子传父</h1>
        <p>子组件传递的值是：<span class="textColor">{{ result }}</span></p>

        <button @click="getSonHander">获取子组件中的数据</button>
    </div>
</template>

<script lang="ts" setup>
import Child from './Child.vue'
import { ref, toRaw} from 'vue'

const parentMsg = ref('父组件传递值是a')

const result = ref('')
const clickEven = (val: any) => {
    console.log(val);
    result.value = val.content
}

const testcomRef = ref()
const getSonHander = () => {
    // JSON序列化(有用)
    const serialize1 = JSON.parse(JSON.stringify(testcomRef.value))
    // 使用toRaw(不起作用)
    const serialize2 = toRaw(testcomRef.value)
    console.log('获取子组件中的相关信息1', serialize1);
    // console.log('获取子组件中的相关信息2', serialize2);
    console.log('获取子组件中的性别', testcomRef.value.sex);
    console.log('获取子组件中的其他信息', testcomRef.value.userInfo.like);
}
</script>

<style lang="scss" scoped>
.textColor {
    color: #00bd7e;
}

.marginTop {
    margin-top: 50px
}
</style>